{extend name="common/index"}
{block name="css"}

{/block}
{block name="content"}
<!--sub_nav-->
<div class="sub_nav">
    <div class="wrap clear">
        <p>你在这里：</p>
        <a href="{:url('index/index')}">首页</a> >
        <a href="{:url('goods/index')}?cat_id=1">产品中心</a> >
        <a class="on" href="javascript:void(0);">{$data.short_name|default=''} </a>
    </div>
</div>

<!--pro-->
<div class="pro_detail">
    <div class="pro_detail_t">
        <div class="wrap clear">
            <div class="pro_detail_pic fl">
                <div class="pro_detail_pic_wrap">
                    <div class="small-box" id="smallBox">
                        <img src="{$data.img_url|default=''}" alt="{$data.goods_name|default=''}"/>
                        <div class="tool" id="tool"></div>
                    </div>
                    <div id="bigBox">
                        <div class="big-box">
                            <img src="{$data.img_url|default=''}" id="bigImg" alt="{$data.goods_name|default=''}"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pro_detail_txt fl">
                <h2>
                    <span style="{$data.goods_name_style|default='font-size: 34px;'}">{$data.goods_name|default=''}</span>
                </h2>
                <a href="" target="_blank" class="more_btn" title="天猫旗舰店" {notempty name="data.buy_url"}href="{$data.buy_url}"{/notempty}>点击购买</a>
            </div>
        </div>
    </div>
    <div class="pro_zb_detail">
        <div class="pro_zb_detail_t">
            <div class="wrap">
                {$data.detail|default=''}
            </div>
        </div>
        <div class="pro_zb_detail_b">
            <div class="wrap">
                <p>想看看我们的其他礼物吗?</p>
                <a href="{:url('goods/roundIndex')}?cat_id=71" class="more_btn">点击了解</a>
            </div>
        </div>
    </div>

</div>
{/block}
{block name="script"}
<script>
    //放大镜
    var picBox = $(".pro_detail_pic_wrap");
    var smallBox = $("#smallBox");
    var tool = $("#tool");
    var bigBox = $("#bigBox");
    var bigImg = $(".big-box");

    picBox.hover(function(){
        tool.addClass('active');
        bigBox.addClass('active')
    },function(){
        tool.removeClass('active');
        bigBox.removeClass('active')
    });

    picBox.mousemove(function(e){
        var _e = window.event||e;
        var x = _e.pageX-$(this).offset().left-tool.width();
        var y = _e.pageY-$(this).offset().top-tool.height()/2;
        if(x<0){
            x = 0;
        }
        if(y<0){
            y = 0;
        }
        if(x>$(this).width()-tool.width()){
            x = $(this).width()-tool.width();
            console.log(x)
        }
        if(y>$(this).height()-tool.height()){
            y = $(this).height()-tool.height();
        }
        tool.css('left',x + "px");
        tool.css('top',y + "px");
        bigImg.css('left',-x*2 + "px");
        bigImg.css('top',-y*2 + "px");
    })
</script>
{/block}
